<style>
  .new_tanchuang{
    background:#fff;
    border-radius: 10px;
  }
  .new_tanchuang .titleee{
    padding:20px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    color:#fff;
    background:#3b79e3;
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
  }
  .new_tanchuang .tanchuang_con{
    padding:15px;
    box-sizing: border-box;
  }
  .new_list .new_list_li{
    display: flex;
    color:#798ca0;
    line-height: 25px;
    font-size: 16px
  }
  .new_list .new_list_li .list_title{
    color: #6581b9;
    padding-right: 10px
  }
  .new_list{
    width: 100%;
    padding-bottom: 15px;
    border-bottom:2px dashed #ccc;
  }
  .new_cont{
    margin-top: 10px;
    display: flex;
  }
  .new_cont .new_cont_left{
    background:#f1f3f7;
    width: 65%;
    padding-bottom: 18px;
  }
  .new_cont .new_cont_right{
    width: 35%;
    border:1px solid #ccc;
  }
  .new_cont .new_cont_right .chenggong{
    text-align: center;
    margin-top:120px;
    font-size: 16px;
    margin-left: 35px;
  }
  .new_cont_left_biaoti{
    padding:5px 20px;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color:#fff;
    background:#3b79e3;
    border-radius: 2px 20px 20px 2px;
    display: inline-block;
  }
  .new_cont_left .new_cont_list{
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc
  }
  .new_cont_left .new_cont_list .new_cont_list_li{
    width: 33%;
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 25px;

  }
  .new_cont_left .new_cont_list .new_cont_list_li .tt{
    color: #798ca0
  }
  .new_cont_left .new_cont_list .new_cont_list_li .ed{
    color: #6581b9;
  }
  .new_cont_left .heji{
    color: #798ca0;
    font-size: 16px;
    padding: 10px;
    text-align:left;
  }
  .new_cont_left .heji span{
    color:#ff4400;
    font-size: 20px;
    font-weight: bold;
  }
  .new_cont_right .erweima{
    width: 150px;
    height: 150px;
    background:red;
    margin: 0 auto;
    margin-top:8%;
  }
  .new_cont_right .erweima img{
    width: 100%;
    height: 100%
  }
  .new_cont_right .zhifutype{
    display: flex;
    justify-content: center;
  }
  .new_cont_right .zhifutype img{
    display: block;
    margin: 15px
  }
  .tanchuang_con .time{
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    color: #798ca0;
    padding:20px;
  }
  .tanchuang_con .time span{
    color:#ff4400;
    font-weight: bold;
  }
</style>
<style>
  .new_table{
    margin:0 auto;
    width: 50%;
  }
  .new_table td{
    width:100px;
    padding:10px;
    box-sizing: border-box;
    text-align: center;
  }
</style>
<style type="text/css">
  .tablist .tabqie{
    height:30px;
    line-height: 30px;
    box-sizing: border-box;
    margin-right:40px;
    cursor: pointer;
  }
  .tabqie.active{
    color:blue;
    border-bottom: 1px solid blue;
    box-sizing: border-box;
  }
  .tablist {
    display: flex;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
  }
</style>
<div class="modal-body" >
  <div class="tablist" id="new_qiehuan">
<!--    <div class="tabqie onee active" data-tcf="shangchuan">上传图片</div>-->
<!--    <?php foreach($pay_channel as $k => $v){?>-->
<!--      <div class="tabqie three" data-tcf="tcf" data-id="{$v.id}">{$v.name}</div>-->
<!--    <?php }?>-->

  </div>

  <div class="new_tanchuang">
    <div class="titleee">{$site.bjd_company}</div>
    <div class="tanchuang_con">
      <div class="new_list">
        <div class="new_list_li"><div class="list_title">服务单号:</div><span id="newjiao_bianhao"></span></div>
        <div class="new_list_li"><div class="list_title">车牌号码:</div><span id="newjiao_pai"></span></div>
        <div class="new_list_li"><div class="list_title namee" >被服务人:</div><span id="newjiao_name"></span></div>
      </div>
      <div class="new_cont">
        <div class="new_cont_left">
          <div class="new_cont_left_biaoti">服务项目</div>
          <div class="new_cont_list" id="fuwuxm">
            <div class="new_cont_list_li">
              <div class="tt">机动车车损服务</div>
              <div class="tt"></div>
              <div class="ed">额度:</div>
            </div>
            <div class="new_cont_list_li">
              <div class="tt">机动车第三者责任服务</div>
              <div class="tt"></div>
              <div class="ed">额度:</div>
            </div>
            <div class="new_cont_list_li">
              <div class="tt">车上人员责任服务(司机)</div>
              <div class="tt"></div>
              <div class="ed">额度:</div>
            </div>
            <div class="new_cont_list_li">
              <div class="tt">标准服务费</div>
              <div class="tt"></div>
              <div class="ed">额度:</div>
            </div>
          </div>
          <div class="heji">合计支付: <span >￥<text id="newjiao_money"></text></span></div>
        </div>
        <div class="new_cont_right">
          <div id="newerweimak">
            <div class="erweima" id="newerweima"><img src="" alt=""></div>
            <div class="zhifutype">
              <img src="/assets/img/weixin.png" alt="">
            </div>
          </div>
          <div id="shangchuan" style="text-align:center">

            <img src="" id="tupian" alt="" />
            <div class="xuan_btn" id="xuanzetu_btn" style="">
              选择图片
              <input  type="file" id="xuanzetu" accept="image/jpeg,image/jpg,image/gif,image/png,image/bmp,video/*">
            </div>


          </div>
          <div class="chenggong" id="newjiaofei_success">
            <div class="cont_list"><div class="zhifu_tt" style="color:#6581b9">支付方式：</div><div id="newjiaofei_fangshi" style="color:#798ca0" >2022-12-11</div></div>
            <div class="cont_list"><div class="zhifu_tt" style="color:#6581b9">支付时间：</div><div id="newjiaofei_time" style="color:#798ca0">12</div></div>
          </div>
        </div>
      </div>
      <div class="time new_zhifu_timess">请在 <span id="new_zhifu_times"></span>前进行扫码支付</div>
    </div>
  </div>


</div>

<style type="text/css" media="all">
  #zhifu_tubiao_gs,#shangchuan{
    display: none;
  }
  #tupian{
    width:200px;
    height:200px;
  }
  .xuan_btn{
    width: 50%;
    background: #3b79e3;
    color: #fff;
    height: 40px;
    line-height: 40px;
    border-radius: 8px;
    margin: 0 auto;
    position: relative;
  }
  #xuanzetu{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
</style>
<script type="text/javascript" charset="utf-8">
  $('#xuanzetu').change(function() {
    var file = this.files[0];
    if (file) {
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function(e) {
        console.log(e)
        $('#tupian').attr('src', e.target.result);
        $("#xuanzetu").attr("type",'text')
        $("#xuanzetu_btn").hide()
      };
    }
  });
  // 切换
  $("body").on('click','.tabqie',function(){
    $("#tupian").attr('src',"")
    $("#shangchuan").hide()
    $("#xuanzetu").attr("type",'file')
    var id=$("#new_jiaofei_id").val()
    $("#zhifutype").html($(this).html())
    console.log($(this).index(),777777)
    $(this).addClass("active").siblings().removeClass('active');
    //服务费
    var tongchou=$(this).data('tcf')
    var channel_id=$(this).data('id')
    var data={'id':id,'type':tongchou,'channel_id':channel_id}
    $.ajax({
      url:"lists/one/new_baojiadan",
      dataType:'json',
      type:'post',
      data:data,
      success:function (res) {
        if(tongchou == 'shangchuan'){
          $("#newerweimak").hide()
          $("#newerweima").html('')
          $("#shangchuan").show()
          $("#xuanzetu_btn").show()
        }else{
          var vall=res.data.er
          $("#newerweimak").show()
          $("#newerweima").html("<img src="+vall+" style='width:160px;height:160px;'/>")
          $(".new_zhifu_timess").show()
          $("#new_zhifu_times").html(res.data.times)
        }
        $("#newjiao_name").html(res.data.learned_name)//车主姓名
        $("#newjiao_pai").html(res.data.car_num)//车牌号码
        $("#newjiao_jia").html(res.data.car_vin)//车架号
        $("#newjiao_money").html(res.data.main_free)//订单金额
        $("#newjiao_bianhao").html(res.data.tong_storage)//编号
      }
    })
  })
  // $("#new_qiehuan .tabqie").click(function(){
  //   console.log(121)
  //   $("#tupian").attr('src',"")
  //   $("#shangchuan").hide()
  //   $("#xuanzetu").attr("type",'file')
  //   var id=$("#new_jiaofei_id").val()
  //   console.log($(this).index())
  //   $(this).addClass("active").siblings().removeClass('active');
  //   if($(this).index()==0){
  //     var data={'id':id,'type':13}
  //     $.ajax({
  //       url:"lists/one/new_baojiadan",
  //       dataType:'json',
  //       type:'post',
  //       data:data,
  //       success:function (res) {
  //         $("#newerweimak").hide()
  //         $("#newerweima").html('')
  //         $("#shangchuan").show()
  //         $("#xuanzetu_btn").show()
  //         $("#newjiao_name").html(res.data.learned_name)//车主姓名
  //         $("#newjiao_pai").html(res.data.car_num)//车牌号码
  //         $("#newjiao_jia").html(res.data.car_vin)//车架号
  //         $("#newjiao_money").html(res.data.main_free)//订单金额
  //         $("#newjiao_bianhao").html(res.data.tong_storage)//编号
  //
  //       }
  //     })
  //   }else if($(this).index()==1){
  //     var data={'id':id,'type':'leshua6'}
  //     $.ajax({
  //       url:"lists/one/new_baojiadan",
  //       dataType:'json',
  //       type:'post',
  //       data:data,
  //       success:function (res) {
  //         var vall=res.data.er
  //         $("#newerweimak").show()
  //         $("#newerweima").html("<img src="+vall+" style='width:160px;height:160px;'/>")
  //         $(".new_zhifu_timess").show()
  //         $("#new_zhifu_times").html(res.data.times)
  //         $("#newjiao_name").html(res.data.learned_name)//车主姓名
  //         $("#newjiao_pai").html(res.data.car_num)//车牌号码
  //         $("#newjiao_jia").html(res.data.car_vin)//车架号
  //         $("#newjiao_money").html(res.data.main_free)//订单金额
  //         $("#newjiao_bianhao").html(res.data.tong_storage)//编号
  //       }
  //     })
  //   }
  // })
</script>